<!--
 * 功能：
 * 作者： caihan
 * 日期:  2021-8-13 1:54:00 ?F10: PM?
 -->
<template>
	<view class="wrap-main flex-column">
		<view class="bcmain" style="width: 750rpx;height: 300rpx; padding-top: 160rpx;">
			<view class="flex p30">
				<!-- 头像 -->
				<u-lazy-load style="width: 120rpx;" borderStyleStr="60rpx 60rpx 60rpx 60rpx" :image="userInfo.avatarUrl"
					height="120"></u-lazy-load>
				<!-- 其他 -->
				<view class="flex-column cfff justify-between ml20" style="height: 120rpx;">
					<view class="fs30 mt10 fbold">{{userInfo.nick}}</view>
					<view class="flex cfff mb10">
						<text class="fs20">id：{{userInfo.userId}}</text>
						<text class="fs20 ml20">排名：{{userInfo.userRanking}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="setting-layout">
			<!-- 我的积分 -->
			<view class="setting-item-layout">
				<text class="iconfont iconjifen fs36" style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">我的积分</text>
				<view class="flex align-center ml-auto">
					<view class="fs24" style="height: 24rpx;line-height: 24rpx;">当前积分：
						<text class="fs24 cmain ml10"
							style="height: 24rpx;line-height: 24rpx;">{{userInfo.integral}}</text>
					</view>
					<text class="iconfont iconright fs36 ml10"
						style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				</view>
			</view>
			<!-- 我的收藏 -->
			<view class="setting-item-layout">
				<text class="iconfont iconfavorfill fs36" style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">我的收藏</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<!-- 我的文章 -->
			<view class="setting-item-layout">
				<text class="iconfont iconhome_light fs36"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">我的文章</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<!-- TODO -->
			<view class="setting-item-layout">
				<text class="iconfont icontixirenzheng fs36"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">TODO</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<view class="line20"></view>
			<!-- 开源网站 -->
			<view class="setting-item-layout">
				<text class="iconfont icontixirenzheng fs36"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">开源网站</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<!-- 加入我们 -->
			<view class="setting-item-layout">
				<text class="iconfont iconpeoplelist fs36"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">加入我们</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<!-- 一些示例 -->
			<view class="setting-item-layout">
				<text class="iconfont icongithub fs36" style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">一些示例</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>
			<!-- 系统设置 -->
			<view class="setting-item-layout">
				<text class="iconfont iconicon-test fs36" style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
				<text class="fs24 c333 ml30">系统设置</text>
				<text class="iconfont iconright fs36 ml-auto"
					style="width: 36rpx;height: 36rpx;line-height: 36rpx;"></text>
			</view>

		</view>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	export default {
		components: {},
		data() {
			return {
				userInfo: {
					avatarUrl: 'https://resource.ushopn7.com/tslm/uni-app/avatorDefault.png',
					nick: '请先登录',
					userId: '--',
					userRanking: '--',
					integral: 0
				}
			}
		},
		computed: {
			//计算属性
		},
		onBackPress() {
			uni.hideKeyboard();
		},
		onLoad: function(options) {},
		onShow: function() {
			if (systemInfo.platform == "android") {
				setTimeout(() => {
					plus.navigator.setStatusBarStyle('light')
				}, 200);
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.wrap-main {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.setting-layout {
		flex: 1;
		background-color: $cfff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding-bottom: 40rpx;
		margin-top: -30rpx;
	}

	.setting-item-layout {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		min-height: 50rpx;
		font-size: 24rpx;
		color: $c333;
	}
</style>
